<template>
  <div class="home">
    <!--搜索框-->
    <search />
    <!--轮播图-->
    <banner :bannerImgArr="bannerImgArr" />
    <!--品类-->
    <channel :channelArr="channelArr" />

    <!--品牌制造商直供-->
    <brand :brandList="brandList"></brand>

    <!--新品首发-->
    <new-goods :newGoodsList="newGoodsList"></new-goods>

    <!-- 人气推荐 -->
    <hot-goods-list :hotGoodsList="hotGoodsList"></hot-goods-list>
  
    <!--专题精选-->
    <topic-list :topicList="topicList"></topic-list>
    
    <!-- 分类 -->
    <category-list :categoryList="categoryList"></category-list>
    <router-view v-slot="{ Component, route }">
      <transition :name="route.meta.transition || 'fade'">
        <component :is="Component" />
      </transition>
    </router-view>



    <p>首页</p>
  </div>
</template>

<script>
  import Search from '@/components/Home/Search';
  import Banner from '@/components/Home/Banner'
  import Channel from '@/components/Home/Channel'
  import Brand from '@/components/Home/Brand.vue'
  import NewGoods from '@/components/Home/NewsGoods.vue'
  import HotGoodsList from '@/components/Home/HotGoodsList.vue'
  import TopicList from '@/components/Home/TopicList.vue'
  import CategoryList from '@/components/Home/CategoryList.vue'

  import {
    GetHomeLists
  } from '@/request/api'

  export default {

    name: 'Home',
    data() {
      return {
        bannerImgArr: [],
        channelArr: [],
        brandList: [],
        newGoodsList:[],
        hotGoodsList:{},
        topicList:[],
        categoryList:{}
      }
    },
    components: {
      Search,
      Banner,
      Channel,
      Brand,
      NewGoods,
      HotGoodsList,
      TopicList,
      CategoryList
    },
    created() {
      GetHomeLists()
        .then(res => {
          if (res.errno == 0) {
            // 所有首页数据
            this.bannerImgArr = res.data.banner
            this.channelArr = res.data.channel
            this.brandList = res.data.brandList
            this.newGoodsList = res.data.newGoodsList
            this.hotGoodsList = res.data.hotGoodsList
            this.topicList = res.data.topicList
            this.categoryList = res.data.categoryList   
          }
        })
    }
  }
</script>


<style lang="less">

</style>